<template>
    <div class="views-shangpinxiaoshoutongji">
        <div>
            <e-container>
                <el-form action="javascript:;" @submit="searchSubmit" inline>
                    <el-form-item label="名称">
                        <el-input v-model="search.mingcheng"></el-input>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-select v-model="search.fenlei"
                            ><el-option label="请选择" value=""></el-option
                            ><e-select-option type="option" module="shangpinfenlei" value="id" label="fenleimingcheng"></e-select-option
                        ></el-select> </el-form-item
                ></el-form>
            </e-container>
        </div>
        <div>
            <e-container>
                <div class="title-modelbox-widget1">
                    <h3 class="section-title">商品销售统计</h3>
                    <div class="sidebar-widget-body">
                        <div style="padding: 10px; background: #ffffff">
                            <el-table :data="dingdanshangpinList">
                                <el-table-column prop="mingcheng" label="名称" width="180" />
                                <el-table-column prop="sum_goumaishuliang" label="购买数量" sortable />
                                <el-table-column prop="sum_xiaoji" label="小计" sortable />
                            </el-table>
                        </div>

                        <v3-echarts :options="barOptions" width="100%" height="300px"></v3-echarts>

                        <v3-echarts :options="barOptions1" width="100%" height="300px"></v3-echarts>
                    </div>
                    <!-- /.sidebar-widget-body -->
                </div>
            </e-container>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";

    import { ref, reactive, watch, computed, unref } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";
    import { extend } from "@/utils/extend";

    const route = useRoute();

    const search = reactive({ mingcheng: "", fenlei: "" });
    extend(search, route.query);
    const serachSubmit = () => {
        loadDatabaseList();
    };
    var timer;
    watch(
        () => search,
        () => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                serachSubmit();
            }, 200);
        },
        { deep: true }
    );
    const dingdanshangpinList = ref([]);
    const loadDatabaseList = async () => {
        var where = " 1=1 ";
        if (search.mingcheng) {
            where += ` AND dds.mingcheng LIKE '%${search.mingcheng}%' `;
        }
        if (search.fenlei) {
            where += ` AND dds.fenlei='${search.fenlei}' `;
        }
        dingdanshangpinList.value = await DB.name("dingdanshangpin")
            .alias("dds")
            .field("dds.mingcheng")
            .group("dds.mingcheng")
            .field("sum(dds.goumaishuliang) sum_goumaishuliang")
            .field("sum(dds.xiaoji) sum_xiaoji")
            .where(where)
            .select();
    };

    loadDatabaseList();
    const barOptions = computed(() => {
        var list = unref(dingdanshangpinList);
        return {
            title: {
                text: "",
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    data: list.map((s) => s.mingcheng),
                    axisTick: {
                        alignWithLabel: true,
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                },
            ],
            series: [
                {
                    name: "购买数量",
                    type: "bar",
                    barWidth: "20px",
                    data: list.map((s) => parseFloat(s.sum_goumaishuliang)),
                },
                {
                    name: "小计",
                    type: "bar",
                    barWidth: "20px",
                    data: list.map((s) => parseFloat(s.sum_xiaoji)),
                },
            ],
        };
    });
    const barOptions1 = computed(() => {
        var list = unref(dingdanshangpinList);
        return {
            title: {
                text: "",
                left: "center",
            },
            tooltip: {
                trigger: "item",
                formatter: "{b}：{c},{d}%",
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                    name: "小计",
                    type: "pie",
                    radius: "50%",
                    data: list.map((s) => {
                        return {
                            value: parseFloat(s.sum_xiaoji),
                            name: s.mingcheng,
                        };
                    }),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
            ],
        };
    });
</script>

<style scoped lang="scss">
    .views-shangpinxiaoshoutongji {
    }
</style>
